﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户评分代码</title>

<link type="text/css" href="css/style.css" rel="stylesheet" />
<!--    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>-->
    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>

<div class="grade_warp">

	<div class="User_ratings User_grade" id="div_fraction0">
		<div class="ratings_title01"><p><span>功能</span>-你觉得这个创意在功能上优秀吗？<i>分数越高表示越优秀。</i></p></div>
		<div class="ratings_bars">
			<span id="title0">0</span>
			<span class="bars_10">0</span>
			<div class="scale" id="bar0">
				<div></div>
				<span id="btn0"></span>
			</div>
			<span class="bars_10">10</span>
		</div>
	</div>
    <div id="sb"></div>
</div>	
	
<script type="text/javascript">
    var flag = false;
    var x = $('#btn0').offset().left;
    $("#btn0").mousedown(function (e) {
        var offset = $(this).offset(); 
        flag = true;
    })
    $("#bar0").mousemove(function (ev) {

        if (flag == true) {
            var _x = ev.pageX - x;
            $("#sb").html(ev.pageX+","+flag.toString());
            $("#btn0").animate({ left: _x + "px" }, 1); 
        }
    })
    $(window).mouseup(function (e) {
        flag = false;
    })
</script>
                    
</body>
</html>
